<template>
  <div class="left-chart-1">
    <div class="title cursorPointer">设备状况</div>
    <div class="wrap">
      <template v-if="!noData">
        <div class="lc1-header">
          <i class="status ON"></i>
          <span>运行&nbsp;{{ count.onCnt }}</span>
          <i class="status OFF"></i>
          <span>停机&nbsp;{{ count.offCnt }}</span>
          <i class="status UNKNOWN"></i>
          <span>离线&nbsp;{{ count.unknowCnt }}</span>
        </div>
        <CustomChart
          class="lc2-chart"
          :option="option"
          :enableClickOptions="['series']"
          @series-click="handleSeriesClick"
        />
      </template>
      <div v-else class="no-data">暂无数据</div>
    </div>

    <el-dialog
      title="故障停机详情"
      :visible.sync="dialogVisible"
      :modal="true"
      :appendToBody="true"
      width="1000px"
      v-dialog-drag
      :close-on-click-modal="false"
      :destroy-on-close="true"
      top="10vh"
    >
      <el-table
        :data="detailData"
        v-loading="detailLoading"
        style="width: 100%"
        height="300px"
      >
        <el-table-column prop="equipName" label="设备名称"> </el-table-column>
        <el-table-column prop="collectTime" label="停机开始时间">
        </el-table-column>
        <el-table-column prop="overTime" label="停机结束时间">
        </el-table-column>
        <el-table-column prop="durationValue" label="故障停机时长(分钟)">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CustomChart from "../../components/CustomChart";
import {
  getEquipmentOffInfoByOrderId,
  getEquipmentOffDetail,
} from "@/api/dashboard/blowIrriagtionSpinLineDaily";
const lineLabelColor = "#ffffffeb";
const equipColor = {
  ON: "#74d047",
  OFF: "#ff5050",
  UNKNOW: "#909399",
};
export default {
  name: "CenterChart2",
  components: { CustomChart },
  props: {
    orderItem: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      count: {
        onCnt: 0,
        offCnt: 0,
        unknowCnt: 0,
      },
      option: {
        color: ["#5470c6", "#ff5050"],
        grid: {
          top: 46,
          right: 30,
          bottom: 50,
        },
        tooltip: {
          trigger: "axis",
          padding: [5, 10],
          formatter: (params) => {
            return `${params[0].name}<br />
              <i class="tooltip-circle" style="background-color:#5470c6;"></i>${
                params[0].seriesName
              }：${this.toFix(params[0].value, 2)}分钟<br />
              <i class="tooltip-circle" style="background-color:#ff5050;"></i>${
                params[1].seriesName
              }：${this.toFix(params[1].value, 2)}分钟`;
          },
        },
        legend: {
          // top: "middle",
          // right: 0,
          // orient: "vertical",
          data: [
            {
              name: "异常停机时长",
              icon: "path://M10 0 H 90 C 100 10, 100 0, 100 100 V 90 C 90 100, 100 100, 0 100 H 10 C 0 90, 0 100, 0 0 V 10 C 10 0, 0 0, 100 0",
              // icon: "path://M8,4 h24 q4,0 4,4 v24 q0,4 -4,4 h-24 q-4,0 -4,-4 v-24 q0,-4 4,-4",
              textStyle: {
                padding: [0, -6],
              },
            },
            {
              name: "故障停机时长",
              icon: "path://M10 0 H 90 C 100 10, 100 0, 100 100 V 90 C 90 100, 100 100, 0 100 H 10 C 0 90, 0 100, 0 0 V 10 C 10 0, 0 0, 100 0",
              // icon: "path://M8,4 h24 q4,0 4,4 v24 q0,4 -4,4 h-24 q-4,0 -4,-4 v-24 q0,-4 4,-4",
              textStyle: {
                padding: [0, -6],
              },
            },
          ],
          itemGap: 16,
          textStyle: {
            color: lineLabelColor,
          },
          // itemWidth: 15,
          itemHeight: 13,
        },
        xAxis: {
          data: [],
          axisLine: {
            lineStyle: {
              color: lineLabelColor,
            },
          },
          axisLabel: {
            interval: 0,
            color: lineLabelColor,
            rotate: 20,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            name: "时长(分钟)",
            nameGap: 20,
            nameTextStyle: {
              color: lineLabelColor,
            },
            position: "left",
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: lineLabelColor,
              },
            },
            axisLabel: {
              color: lineLabelColor,
              hideOverlap: true,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "异常停机时长",
            data: [],
            type: "bar",
            label: {
              show: true,
              fontSize: 8,
              position: "top",
              offset: [-4, 0],
              color: lineLabelColor,
              formatter: (param) => {
                return `${this.toFix(param.data?.equipOffTimes || 0, 2)}次\n${
                  param.value
                }`;
              },
            },
            barGap: 0,
            barWidth: "35%",
          },
          {
            name: "故障停机时长",
            data: [],
            type: "bar",
            label: {
              show: true,
              fontSize: 8,
              position: "top",
              offset: [4, 0],
              color: lineLabelColor,
              formatter: (param) => {
                return `${this.toFix(
                  param.data?.equipAbnormalTimes || 0,
                  2
                )}次\n${param.value}`;
              },
            },
            barGap: 0,
            barWidth: "35%",
          },
        ],
      },
      dialogVisible: false,
      detailData: [],
      detailLoading: false,
    };
  },
  computed: {
    noData() {
      return !this.orderItem || !this.option.xAxis.data?.length;
    },
  },
  methods: {
    async getData() {
      if (!this.orderItem) {
        return;
      }

      const param = {
        orderId: this.orderItem.id,
      };

      try {
        const res = await getEquipmentOffInfoByOrderId(param);

        this.count = {
          onCnt: res.data.onCnt,
          offCnt: res.data.offCnt,
          unknowCnt: res.data.unknowCnt,
        };

        const _equipmentRunStatuss = res.data.equipmentRunStatuss;

        let xAxisData = [];
        let seriesData1 = [];
        let seriesData2 = [];

        _equipmentRunStatuss.forEach((ele) => {
          xAxisData.push({
            value: ele.equipName,
            textStyle: {
              color: equipColor[ele.runStatus],
            },
          });
          seriesData1.push({
            name: ele.equipName,
            value: this.toFix(ele.equipOffDuration, 2),
            ...ele,
          });
          seriesData2.push({
            name: ele.equipName,
            value: this.toFix(ele.equipAbnormalDuration, 2),
            ...ele,
          });
        });

        this.option.xAxis.data = xAxisData;
        this.option.series[0].data = seriesData1;
        this.option.series[1].data = seriesData2;
      } catch (error) {
        this.option.xAxis.data = [];
        this.option.series[0].data = [];
        this.option.series[1].data = [];
      }
    },
    async handleSeriesClick(e) {
      if (e.seriesIndex != 1) {
        return;
      }

      this.dialogVisible = true;
      this.detailLoading = true;

      const param = {
        orderId: this.orderItem.id,
        stopDurationScadaPointCode: e.data.stopDurationScadaPointCode,
      };

      try {
        const res = await getEquipmentOffDetail(param);

        this.detailData = res.data.map((row) => ({
          ...row,
          durationValue: this.toFix(row.durationValue, 2),
        }));
      } catch (error) {
        this.detailData = [];
      }

      this.detailLoading = false;
    },
  },
  watch: {
    orderItem: {
      handler() {
        this.getData();
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.el-carousel {
  width: 100%;
  height: 100%;
}
.left-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .wrap {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    padding: 30px 35px;
  }

  .wrap1 {
    flex: 1;
    padding: 30px 35px;
  }

  #wrapInner {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
  }

  .lc1-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    text-align: center;
    i {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      &.ON {
        background-color: #74d047;
      }
      &.OFF {
        background-color: #ff5050;
      }
      &.UNKNOWN {
        background-color: #909399;
      }
    }
  }
  .lc2-chart {
    height: 100%;
    flex: 1;
  }

  .time-line {
    width: 100%;
    height: 20px;
    line-height: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    &-inner {
      flex: 1;
      height: 100%;
      background-color: #24ec26;
      position: relative;
      .stop-step {
        position: absolute;
        height: calc(100% - 2px);
        margin-top: 1px;
        background-color: #ff5050;
      }
    }
  }
}
::v-deep .tooltip-circle {
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
}
</style>
